Book - Responsive Ebook Landing Page

Documentation

Which code editor for editing files ?

You can use sublime text 3 for editing the code.
Download link : http://www.sublimetext.com/3

How to change Background image?

To change the image go to img folder and replace bg.jpg

How to change hero image?

To change the ebook image go to img folder and replace ebook.png

How to Edit the features?

Open the index.html file in your code editor. 
 
 
Go to line no 53 and change the feature.

How to Edit the counter?

 
Open the main.js file in your code editor. 
 
 
Go to line no 44, 49, 54 and 59 and change the numbers to you desired value.

How to integrate your mailchimp to subscribe form?

Open the main.js file in your code editor.
 
    $('#mc-form').ajaxChimp({

	        callback: callbackFunction,

	        url: 'http://csmthemes.us3.list-manage.com/subscribe/post?u=9666c25a337f497687875a388&id=45b2c44b98'

	           // http://xxx.xxx.list-manage.com/subscribe/post?u=xxx&id=xxx

	    });
 
Go to line no 7, changes needs to be made here :
 
http://csmthemes.us3.list-manage.com/subscribe/post?u=9666c25a337f497687875a388&id=45b2c44b98
 
You need to change three value
csmthemes.us3
u=9666c25a337f497687875a388
id=45b2c44b98
 

First login to mailchimp dashboard, then go to lists tab, now create a list by clicking on the 'create list' button. After the list is created watch the video below.

 

Watch Video Tutorial

 
 
Learn more about mailchimp http://kb.mailchimp.com/video-index

How to change the video?

Open the index.html file in your code editor. 
 
 
Go to line no 136 and change the vimeo url last string (81209488) to your url.
 
For youtube video uncomment the youtube url on line no 138 and change the youtube url last string (xxxxxxxxxxx) to your url.

How to Edit the reviews?

 
Open the index.html file in your code editor. 
 
 
Go to line no 151 and edit the review section.
 
To change the image go to img folder and replace review-1.jpg, review-2.jpg, review-3.jpg. For retina image replace review-1@2x.jpg, review-2@2x.jpg, review-3@2x.jpg.

How to Edit the pricing table?

 
Open the index.html file in your code editor. 
 
 
Go to line no 232 and edit the prices section.

How to Edit the author section?

 
Open the index.html file in your code editor. 
 
 
Go to line no 305 and edit the author section.
 
Visit http://www.fontspace.com/peax-webdesign/pwsignaturetwo to get the signature font.

How to change social media?

 
 
Open the index.html file in your code editor.
 
Social media links can be changed on line no 322 and 436
 
Change the value of href { change the # to say https://twitter.com/name } to correspond to the social media name.
 
 
Add more icons if needed (optional)
 
You can add more social media links if needed.
 
More icons can be found here. http://fortawesome.github.io/Font-Awesome/icons/
 
Select the icon you need , click on one of them for example linkedin-square http://fortawesome.github.io/Font-Awesome/icon/linkedin-square/ 
 
Add another line of code after line no 325 or 438 in index.html , which should look like this , <li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
 
Check out fortawesome doc for more info http://fortawesome.github.io/Font-Awesome/examples/

How to get the contact form working?

Go to php folder, inside the php folder open contact-me.php file in your code editor.
 
 
Go to line no 3 and change the email address to your email address.
 
IMPORTANT: Use a domain email to recieve mails, it won't work with any other email address. Example, if your domain is abc.com your email address will be name@abc.com

How to Edit the map?

Go to js folder and open the gmaps.js file in your code editor. 
 
 
change coordinates on line number 1.
 
change zoom on line number 7
 
change title on line number 19
 
Map can be found at https://www.google.com/maps/
     
Usage of Google Maps requires a API key.
 
Get a key from here:
 
https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key
 
Replace this in index.html with your API key
 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

How to Edit Privacy and terms?

Open the index.html file in your code editor. 
 
 
Go to line no 454 and change the text for privacy modal.
 
 
Go to line no 473 and change the text for terms modal.
 

How to change Twitter feed?

 

Step 1

Open the main.js file in your code editor. 
 
Go to line no 77.
Change envatomarket to your username.

Step 2

 
 
 
First, you need a consumer key and secret keys. Get one from https://dev.twitter.com/apps
 
Edit api/config.php file and replace variables with your Consumer and oAuth Keys. 
    // Consumer Key
    define('CONSUMER_KEY', 'CONSUMER_KEY_HERE');
    define('CONSUMER_SECRET', 'CONSUMER_SECRET_HERE');

    // User Access Token
    define('ACCESS_TOKEN', 'ACCESS_TOKEN_HERE');
    define('ACCESS_SECRET', 'ACCESS_SECRET_HERE');
Plugin doc https://github.com/sonnyt/Tweetie
 
You need a webhost for this to work.

Credits

http://unsplash.com/
http://www.pixeden.com/psd-mock-up-templates/psd-book-mockup-hardcover-2
http://www.pixeden.com/psd-mock-up-templates/product-psd-stationery-mockup-set
https://graphicburger.com/hardcover-book-mockup-2/
https://graphicburger.com/hardcover-book-mockup/
https://pixelbuddha.net/mockups/hardback-book-mockup
http://www.fontspace.com/peax-webdesign/pwsignaturetwo
https://www.iconfinder.com/iconsets/48-bubbles
http://retinajs.com/
http://getbootstrap.com/
http://fortawesome.github.io/Font-Awesome/
https://github.com/scdoshi/jquery-ajaxchimp
http://daneden.github.io/animate.css/